<!DOCTYPE html>
<html>
<head>
	<title>商品规格</title>
	<include file='public/head'>
	<style>
		.layui-legend-size{font-size:14px !important;}
		.layui-nopadding{padding:0 !important;}
		.layui-overflow{overflow:auto;}
		.layui-nomargin{margin: 0 !important;}
		.layui-bottom{border-bottom:1px solid rgb(226, 226, 226);}
		.layui-input{height:30px !important; }
		.layui-form-search-item .layui-inline{margin-bottom: 5px;} 
		.layui-form-search-item label{margin-left: 15px;}
		.layui-table-page {padding: 7px 0px 0px;}
		.layui-field-padding{border-width: 1px;padding:0 0 5px 10px;}
	</style>		
</head>
<body>
<!-- layui-tab开始 -->
<div class="layui-tab " lay-filter="demo-tab">
	<!-- 顶部导航菜单开始 -->
	<div class="layui-tab-nav" >
        <ul class="layui-tab-title">
			{:getNav('goods','goods_spec/index')};
		</ul>
	</div>
	<!-- 顶部导航菜单结束 -->
	<!-- 搜索栏开始 -->
	<fieldset class="layui-elem-field layui-field-title layui-field-padding">
		<legend class="layui-legend-size">搜索</legend>
		<form class="layui-form table-bar" action="{:cmf_plugin_url('Goods://goods_spec/index')}" lay-filter="form-bar" method="post">
			<div class="layui-form-search-item">
				<div class="layui-input-inline" style="width:130px">
<!-- 			        <select name="cid" lay-filter="list" lay-verify="required" lay-search="">
			          <option value="0">输入关键字或点击</option>
			        </select> -->
			        <input type="text" name="search" placeholder="输入查询关键字" class="layui-input" value="{$search}">
		        </div>
				<button type="submit" class="layui-btn layui-btn-sm layui-btn-primary " style="font-weight:800;" lay-submit="" lay-filter="demo2"><i class="layui-icon ">&#xe615;</i>搜索</button>
			</div>
		</form>
	</fieldset>
	<!-- 搜索栏结束 -->
	<!-- 表格内容开始 -->
	<div class="layui-card">
		<div class="layui-card-header layui-bg-gray layui-bottom">
			<a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-danger batch-delete" onclick="allDelete()"><i class="layui-icon">&#xe640;</i>批量删除</a>
			<a href="javascript:;" class="layui-btn layui-btn-xs add-btn" ><i class="layui-icon">&#xe654;</i>添加</a>
		</div>
		<div class="layui-card-body layui-nopadding " >
			<table  class="layui-table layui-nomargin" >
				<!-- 表格头 -->
				<thead>
					<tr>
						<th width='20px'>
							<input type='checkbox' id='check-box-all' class='layui-form-checkbox'>
						</th>
						<th>规格模板ID</th>
						<th>模板名称</th>
						<th>所属分类</th>
						<th>规格名称</th>
						<th>操作</th>
					</tr>
				</thead>
				<!-- 表格头 -->
				<!-- 表格内容输出 -->
				<form method="post" id="f">
				<volist name="list" id="vo">
					<tr>
						<th>
							<input type="checkbox" class='check-box' name='spec_id[]' value='{$vo.spec_id}'>
						</th>
						<td>{$vo.spec_id}</td>
						<td>{$vo.module_name}</td>
						<td>{$vo.cid}</td>
						<td>
							{$vo.name}
						</td>
						<td width="120px">
							<div class="layui-btn-group">
							<button type='button' class='layui-btn layui-btn-xs layui-btn-primary update-btn' style='font-weight:800 ;' data-id='{$vo.spec_id}' title='编辑'><i class='layui-icon'>&#xe642;</i></button><button type='button' class='layui-btn layui-btn-xs layui-btn-primary delete-btn' style='font-weight:800 ;' data-id='{$vo.spec_id}' title='删除'><i class='layui-icon'>&#xe640;</i></button><button type='button' class='layui-btn layui-btn-xs layui-btn-primary detail-btn' style='font-weight:800 ;' data-id='{$vo.spec_id}' title='查看'><i class='layui-icon'>&#xe602;</i></button>
							</div>
						</td>
					</tr>
				</volist>
				</form>
				<!-- 表格内容输出结束 -->
			</table>
		</div>
	</div>
	<!-- 表格内容开始 -->
</div>
	<include file='public/scripts'>
<script type="text/javascript">
	var form = layui.form;
	form.on('select(list)', function(data){
        let selectText=data.elem[data.elem.selectedIndex].text;//得到被选中的文本值
        // selectText=selectText.trim();//去掉&nbap
        selectText=selectText.replace(/\s+/g, "");
        data.elem[data.elem.selectedIndex].text=selectText;//覆盖原文本值
    });	
	//添加模板
	$('.add-btn').on('click',function(){
		let url = "{:cmf_plugin_url('goods://goods_spec/addspecpage')}";
		layer.open({
			type: 2//基本层类型  0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
			,title: '添加规格模板'//层的标题
			,shadeClose: true//是否点击遮罩关闭
			,shade: 0.8//遮罩
			,area: ['100%', '100%']//宽高
			,btn:['提交','关闭']//弹框按钮
			,fixed:false//固定
			,content: url //iframe的url
			,yes:function(index, layero){
            //子页面的请求操作都放子页面
                var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：
                iframeWin.tijiao();
			}
			,btn2:function(index, layero){
			}
		});
	})
	//查看
	$('.detail-btn').on('click',function(){
		let id = $(this).data('id');
		let url = "{:cmf_plugin_url('goods://goods_spec/detail')}?spec_id="+id;
		layer.open({
			type: 2//基本层类型  0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
			,title: '查看'//层的标题
			,shadeClose: true//是否点击遮罩关闭
			,shade: 0.8//遮罩
			,area: ['800px', '600px']//宽高
			,btn:['关闭']//弹框按钮
			,fixed:false//固定
			,content: url //iframe的url
			,btn2:function(index, layero){
			}			
		});
	})
	//编辑属性
	$('.update-btn').on('click',function(){
		let id = $(this).data('id');
		let url = "{:cmf_plugin_url('goods://goods_spec/editpage')}?spec_id="+id;
		layer.open({
			type: 2//基本层类型  0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
			,title: '编辑属性'//层的标题
			,shadeClose: true//是否点击遮罩关闭
			,shade: 0.8//遮罩
			,area: ['100%', '100%']//宽高
			,btn:['提交','关闭']//弹框按钮
			,fixed:false//固定
			,content: url //iframe的url
			,yes:function(index, layero){
            //子页面的请求操作都放子页面
                var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：
                iframeWin.tijiao();
			}
			,btn2:function(index, layero){
			}
		});
	});
    //删除
    $('.delete-btn').on('click',function(){
        let f = $(this).data('id');
        //询问
        layer.confirm('确定要删除吗？',{icon:3,title:'提示',btn:['删除','取消']}
        ,function(index,layero){
            $.ajax({
                url:"{:cmf_plugin_url('Goods://goods_spec/delete')}",
                type:'post',
                data:{spec_id:f},
				success:function(data){
					if (data.code == 1) {
						layer.msg(data.msg,{icon:1,time:1500},function(){
							location.reload(); 
						});
					} else {
						layer.msg(data.msg,{icon:2,time:1500});
					}
				},
				error:function()
				{
					layer.msg('系统错误',{icon:2,time:1500});
				}
            })   
        },function(index){});
    })
	//批量删除
    function allDelete(){
        var text = "确定要删除吗？";
        var da = $('#f').serialize();
        let url = "{:cmf_plugin_url('Goods://goods_spec/delete')}";
        layer.confirm(text, {icon: 3, title:'提示', btn: ['确定','取消']}, function(index,layero){
            $.ajax({
            	type:'post',
                url:url,
                data:da,
                success:function(data){
                    if (data.code == 1) {
                        layer.msg(data.msg,{icon:1,time:1500},function(){
                            window.location.reload();
                        });
                    } else {
                        layer.msg(data.msg,{icon:2,time:1500});
                    }
                },
                error:function(){
                    layer.msg('系统错误',{icon:2,time:1500});
                }
            })
        },function(index){
            // alert('取消');
        });
    }    
	//全选/取消
	$('#check-box-all').on('click',function(){
		$('.check-box').prop('checked',$('#check-box-all').prop('checked'));
	});
</script>
</body>
</html>